.mini {
  &-container {
    &-header {
      position: relative;
      height: 576rpx;
      width: 100vw;
      background: url("http://51-jzt-dev.oss-cn-hangzhou.aliyuncs.com/miniapp/%E8%83%8C%E6%99%AF%E5%9B%BE%402x.png") no-repeat;
      background-size: cover;

      :deep(.wd-navbar) {
        padding-top: 88rpx;
        background: transparent;

        .wd-navbar__title {
          font-size: 36rpx;
          color: #FFFFFF;
        }

        .wd-navbar__arrow {
          width: 36rpx;
          color: #FFFFFF;
        }
      }

      :deep(.wd-navbar::after) {
        background: transparent !important;
      }
    }

  }

  &-header {
    position: absolute;
    bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: center;

    &-num {
      width: 686rpx;
      height: 152rpx;
      background: rgba(76, 129, 250, 0.7);
      box-shadow: inset 0rpx 7rpx 7rpx -5rpx #ffff;
      border-radius: 20rpx 20rpx 0rpx 0rpx;
      border: 2rpx solid rgba(255, 255, 255, 0.7);
      display: flex;
      justify-content: space-evenly;
      align-items: center;
      color: #FFFFFF;

      .line {
        width: 8rpx;
        height: 50rpx;
        background: #FFFFFF;
        border-radius: 4rpx 4rpx 4rpx 4rpx;
        opacity: 0.5;
      }
    }

    &-box {
      width: 100vw;
      height: 42rpx;
      background: #F8FAFF;
      border-radius: 40rpx 40rpx 0rpx 0rpx;
    }
  }

  &-content {
    padding: 0 32rpx 10rpx;

    :deep(.tabs) {
      margin-top: 0;
      gap: 64rpx;
      margin-bottom: 32rpx;
      position: sticky;
      top: 0;
      z-index: 99;
    }
    :deep(.wd-cell__wrapper) {
      padding-top: 0;
      padding-bottom: 10rpx;
      .wd-cell__title{
        font-size: 24rpx;
        color: rgba(134, 144, 156, 1);
      }
    }
    :deep(.card-list-cell){
      .wd-cell__wrapper{
        padding-top: 18rpx;
        padding-bottom: 0;
        .wd-cell__title{
          font-size: 28rpx;
        }
      }
    }
    .card-list {
      background: #FFFFFF;
      box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(134, 144, 156, 0.1);
      border-radius: 20rpx 20rpx 20rpx 20rpx;
      overflow: hidden;
      margin-bottom: 20rpx;

      &-header {
        border-bottom: 2rpx solid #F5F7FA;
        padding-bottom: 24rpx;
      }

      &-container {
        display: flex;
        justify-content: space-evenly;
        margin-bottom: 20rpx;

        .amount-content {
          width: 300rpx;
          height: 128rpx;
          background: #F6F8FA;
          border-radius: 10rpx 10rpx 10rpx 10rpx;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          font-size: 24rpx;
          color: #86909C;

          .amount {
            color: #3D3D3D;
            margin-bottom: 10rpx;
          }
        }
      }

      &-footer {
        border-top: 2rpx solid #F5F7FA;
        padding: 24rpx;
        color: #007DFF;
        font-size: 28rpx;
        display: flex;
        justify-content: center;
        align-content: center;

        .divider-grey {
          width: 4rpx;
          height: 40rpx;
          background: #E1E6ED;
        }
      }
    }

  }

}

.flex-column {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.font28 {
  font-size: 28rpx;
}

.font44 {
  font-size: 44rpx;
  font-weight: 500;
}

.mb16 {
  margin-bottom: 16rpx;
}
